<template>
	<view class="applyDetail">
		<view class="steps">
			<view class="stepsBox">
				<u-steps :current="current" dot>
					<u-steps-item :title="item.name" v-for="item in nodeIndex" :key="item.id" iconSize="20px">
					</u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="detailTitle">
			<view :class="[isClick === '审批记录' ? 'active' :'','jilu']" @click="swichTitle('审批记录')">
				<text>审批记录</text>
			</view>
			<view :class="[isClick === '内容' ? 'active' :'','neirong']" @click="swichTitle('内容')">
				<text>内容</text>
			</view>
		</view>
		<view class="detailJilu" v-if="isClick === '审批记录'">
			<view class="" v-if="noteList.length > 0">
				<u-steps current="1" direction="column" v-for="item in noteList" :key="item.id">
					<u-steps-item :title="item.add_time">
						<view class="descContent" slot="desc">
							<view class="title">
								{{item.flow_type_val}}
							</view>
							<view class="pFont">
								<text>审批类型：</text><text class="textC text">{{item.flow_id_val}}</text>
								<text>审批节点：</text><text class="textC">{{item.flow_node_id_val}}</text>
							</view>
							<view class="pFont">
								<text>审批人：</text><text class="textC text">{{item.worker_id_val}}</text>
								<text>审批结果：</text>
								<view style="display: inline-block;
									width: 26%;">
									<u-tag :text="items[item.approval_result].label"
										:type="items[item.approval_result].type"></u-tag>
								</view>

							</view>
							<view class="pFont">
								<text>备注：{{item.memo}}</text>
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
			<view style="text-align: center;padding-bottom: 50px;" v-else>
				<image src="../../static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view class="">
					暂无记录
				</view>
			</view>
		</view>
		<view class="content" v-if="isClick === '内容'">
			<view class="conT">
				<u-icon name="bookmark-fill" color="#2979ff" size="40"
					style="display: inline-block;    vertical-align: middle;"></u-icon>
				内容
			</view>
			<view class="contentBox" v-if="jsonList.length > 0">
				<view class="listBox" v-for="(item, index) in jsonList" :key="index">
					<template v-if="item.type == 'select' || item.type == 'checkbox'">
						<text class="title">{{ item.name }}：</text>
						<text v-for="(kvItem, kvIndex) in keyValueDatas[item.field]" :key="kvIndex">
							<text v-for="(vItem, vIndex) in item.value.split(',')" :key="vIndex">
								<template v-if="kvItem.value == vItem">
									{{ kvItem.label }}
									<text v-if="vIndex < item.value.split(',').length - 1">
										,
									</text>
								</template>
							</text>
						</text>
					</template>
					<template v-else-if="item.type == 'radio'">
						<text class="title">{{ item.name }}：</text>
						<text v-for="(kvItem, kvIndex) in keyValueDatas[item.field]" :key="kvIndex">
							<template v-if="kvItem.value == item.value">
								<text>{{ kvItem.label }}</text>
							</template>
						</text>
					</template>
					<template v-else-if="item.type == 'upload'">
						<text class="title">{{ item.name }}：</text>
						<p>
							<text v-for="(imgUrlItem, imgUrlIndex) in item.value" :key="imgUrlIndex">
								<template v-if="imgUrlItem">
									<template v-if="
					                        imgList.includes(
					                          imgUrlItem.split('.')[
					                            imgUrlItem.split('.').length - 1
					                          ]
					                        )
					                      ">
										<image class="roc-image" :preview-src-list="item.value" :src="imgUrlItem" />
									</template>
									<template v-else>
										<a class="file-dom-a" :href="imgUrlItem">
											<i class="el-icon-folder"></i>
										</a>
									</template>
								</template>
							</text>
						</p>
					</template>
					<template v-else-if="item.type == 'cascader'">
						<text class="name">{{ item.name }}:</text>
					</template>
					<template v-else-if="item.type == 'tree'">
						<text class="title">{{ item.name }}：</text>
					</template>
					<template v-else-if="item.type == 'fc-editor'">
						<text class="title">{{ item.name }}：</text>
						<text v-html="item.value"></text>
					</template>
					<template v-else>
						<text class="title">{{ item.name }}：</text>
						<text v-html="item.value"></text>
						<text v-if="item.type == 'input'">
							{{ item.title }}
							<text v-if="
					                    item.children != undefined &&
					                    item.children[0].children[0] != ''
					                  ">
								({{ item.children[0].children[0] }})
							</text>
						</text>
					</template>
				</view>
			</view>
			<view style="text-align: center;padding-bottom: 50px;" v-else>
				<image src="../../static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view class="">
					暂无内容
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNodeLog,
		getNodeIndex,
		getCompletedJson
	} from "../../api/flow.js"
	import {
		getDetail
	} from "../../api/dataAccess.js"

	import valueShowName from '@/mixins/valueShowName.js';
	export default {
		mixins: [valueShowName],
		data() {
			return {
				id: '',
				isClick: '审批记录',
				noteList: [],
				items: [{
						type: '',
						label: ''
					},
					{
						type: 'success',
						label: '同意'
					},
					{
						type: 'error',
						label: '拒绝'
					},
					{
						type: 'warning',
						label: '退回'
					},
				],
				flow_id: '',
				nodeIndex: [],
				flow_node_id: '',
				current: '0',
				model_id: '',
				form: {},
				dataDetail: {},
				detailsKey: [],
				tableFdList: [],
				jsonList: []

			}
		},
		onLoad(option) {
			this.id = JSON.parse(option.data).id
			this.flow_id = JSON.parse(option.data).flow_id
			this.flow_node_id = JSON.parse(option.data).flow_node_id;
			this.form.id = JSON.parse(option.data).model_data_id
			this.form.code = JSON.parse(option.data).code;
			this.model_id = JSON.parse(option.data).model_id
		},
		mounted() {
			this.getNodeList();
			this.getNodeIndex();
			this.getDetail2()
		},
		methods: {
			swichTitle(title) {
				this.isClick = title
			},
			getNodeList() {
				getNodeLog({
					flow_log_id: this.id
				}).then(res => {
					if (res.data.code === 1) {
						this.noteList = res.data.data
					}
				})
			},
			getNodeIndex() {
				getNodeIndex({
					flow_id: this.flow_id
				}).then(res => {
					if (res.data.code === 1) {
						res.data.data.unshift({
							id: '0',
							name: '提交审批'
						})
						this.nodeIndex = res.data.data
						this.nodeIndex.forEach((ele, i) => {
							if (ele.id === this.flow_node_id) {
								this.current = i
							}
						})
					}
				})
			},
			async getDetail2() {
				const {
					data
				} = await getDetail(this.form)
				console.log(data)
				if (data.data) {
					this.dataDetail = data.data
					this.detailsKey = Object.keys(data.data)
					this.getJson()
				} else {
					this.jsonList = []
				}
			},
			async getJson() {
				const {
					data
				} = await getCompletedJson({
					id: this.model_id
				})
				// 使用mixin方法（获取字段api数据）
				await this.getFieldApiData(data.data.formRules)
				// // 详情字段title与value数据处理
				console.log(data.data.formRules)
				console.log(this.detailsKey)
				for (let jsonItem of data.data.formRules) {
					for (let field of this.detailsKey) {
						if (jsonItem.field == field) {
							const obj = {
								name: jsonItem.title,
								value: this.dataDetail[field],
								field: jsonItem.field,
								type: jsonItem.type,
								props: jsonItem.props,
								info: jsonItem.info,
							}
							if (jsonItem.children != undefined) {
								obj.children = jsonItem.children
							}
							this.jsonList.push(obj)
						}
					}
				}
				console.log(this.jsonList)
			},
		}
	}
</script>

<style lang="scss">
	.applyDetail {
		width: 100%;
		height: 100%;
		background-color: rgba(249, 249, 249, 1);

		.u-text__value {
			font-size: 24rpx !important;
		}

		.content {
			.contentBox {
				background-color: #fff;
			}

			.conT {
				width: 95%;
				margin: 0 auto;
				padding: 15px 0;
			}

			.listBox {
				width: 95%;
				margin: 0 auto;
				padding: 10px 0;
				border-bottom: 1px solid #ecedef;

				.title {
					display: inline-block;
				}
			}
		}

		.steps {
			width: 100%;
			background-color: #fff;
			padding: 20px 0;
			border-bottom: 1px solid rgb(242, 242, 242);

			.stepsBox {
				width: 95%;
				margin: 0 auto;
				font-size: 17px;
				color: rgb(153, 153, 153);
			}

		}

		.detailTitle {
			width: 100%;
			font-size: 14px;
			margin-top: 15px;

			.jilu,
			.neirong {
				width: 49.4%;
				display: inline-block;
				text-align: center;
				padding: 10px 0;
				color: rgb(52, 120, 247);
				border-width: 1px;
				border-style: solid;
				border-color: rgb(0, 121, 254);
			}

			.jilu {
				border-radius: 5px 0px 0px 5px;
			}

			.neirong {
				border-radius: 0px 5px 5px 0px;
			}

			.active {
				background-color: rgb(52, 120, 247);
				color: #fff;
			}
		}

		.detailJilu {
			width: 90%;
			margin: 0 auto;
			margin-top: 15px;

			.descContent {
				width: 90%;
				margin: 0 auto;
				padding: 15px;
				font-size: 14px;
				background-color: #fff;
				border: 1px solid #ebeef5;
				border-radius: 5px;
				background-color: #fff;
				-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

				view {
					padding: 5rpx 0;
				}

				.title {
					font-size: 15px;
					font-weight: bold;
				}

				.textC {
					color: #606266;
				}

				.text {
					margin-right: 15px;
				}

				.pFont {
					font-size: 13px;
				}

				.testTag {
					display: inline-block;
					width: 26%;
				}
			}
		}
	}
</style>
<style>
	.applyDetail .u-text__value span {
		font-size: 24rpx
	}
</style>
